<template>
  <Table :columns="columns" :scroll="{ x: 600, y: contentHeight - 45 }" :pagination="false" :data-source="skholders" size="small" bordered />
</template>
<script setup>
  import dayjs from 'dayjs';
  import { ref, watchEffect, inject, reactive } from 'vue';
  import { Table } from 'ant-design-vue';
  import { friendlyNumbers } from '@/libs/helpers.js';

  const props = defineProps({
    code: {
      type: String
    },
    contentHeight: {
      type: Number
    }
  });

  const columns = reactive([
    {
      title: '序号',
      width: 50,
      align: 'center',
      customRender: ({ record, index }) => {
        return index + 1;
      }
    },
    { title: '姓名', width: 100, dataIndex: 'personal_name' },
    { title: '职务', width: 100, dataIndex: 'position_name' },
    { title: '任职日期', width: 110, customRender: ({ record }) => dayjs(record.employ_date).format('YYYY-MM-DD') },
    { title: '年薪', width: 100, customRender: ({ record }) => friendlyNumbers(record.annual_salary) },
    { title: '持股数', width: 100, customRender: ({ record }) => friendlyNumbers(record.held_num) },
    { title: '介绍', dataIndex: 'resume_cn' }
  ]);

  const $http = inject('$http');

  const skholders = ref([]);

  function loadSkholders() {
    if (!props.code) {
      return;
    }

    let url = `/api/shares/${props.code}/skholder`;

    $http.get(url).then(res => {
      skholders.value = res.datas;
    });
  }

  watchEffect(() => {
    loadSkholders();
  });
</script>
